<script setup lang="ts">
// 系统管理-租户管理-编辑租户
import {editTenementApi} from '@/assets/api/systemManagement/system/tenement'
import {onMounted, reactive, ref} from 'vue'
import {ElMessage, type FormInstance} from 'element-plus'
import {getLabelListByTypeApi} from '@/assets/api/systemManagement/data/label'
import {labelTypeList} from '@/components/baseTs/labelType'

const props = defineProps<{
  form: {
    name: string,
    simpleName: string,
    tenantKey: string,
    dbUrl: string,
    serveTime: string,
    status: number
  },
  disabled: boolean // 如果是编辑则禁用部分字段
}
>()
const emit = defineEmits(['save', 'close'])

// 获取服务器列表
const serverList = ref()
const getServerList = () => {
  const servers = labelTypeList.filter(item => item.label === '服务器列表')
  if (servers.length === 0) return
  getLabelListByTypeApi(servers[0].value).then(res => {
    if (res.data.code == 200)
      serverList.value = res.data.data
    else
      ElMessage.error({message: res.data.data, showClose: true})
  })
}

// 表单验证
const formRef = ref()
const checkTenantKey = (rule: any, value: string, callback: any) => {
  const reg = /^[a-zA-Z0-9]{2,6}$/
  if (!reg.test(value)) {
    callback(new Error('分库标识长度为2-6位，且只能由字母和数字组成的'))
  }
  callback()
}

const rules = reactive({
  name: [
    {required: true, message: '请输入租户名', trigger: 'blur'},
    {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
  ],
  simpleName: [
    {required: true, message: '请输入租户简称', trigger: 'blur'},
    {min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur'}
  ],
  tenantKey: [
    {required: true, validator: checkTenantKey, trigger: 'blur'}
  ],
  dbUrl: [
    {required: true, message: '请选择分库地址', trigger: 'change'}
  ],
  serveTime: [
    {required: true, message: '请选择服务截至日期', trigger: 'change'}
  ],
  status: [
    {required: true, message: '请选择用户状态', trigger: 'change'}
  ]
})

// 保存
const saveLoading = ref(false)
const save = async (formEl: FormInstance) => {
  if (!formEl) return
  await formEl.validate((valid: boolean) => {
    if (valid) {
      // // 日期格式化
      if (props.form.serveTime.includes('T'))
        props.form.serveTime = props.form.serveTime.substring(0, 10)
      saveLoading.value = true
      editTenementApi(props.form).then(res => {
        saveLoading.value = false
        ElMessage.info(res.data.data)
        if (res.data.code === 200) {
          emit('save', true)
        } else {
          emit('save', false)
        }
      })
    }
  })
}

onMounted(() => {
  getServerList()
})
</script>

<template>
  <!--  系统管理-租户管理-编辑租户 -->
  <div class="app-container">
    <el-form v-loading="saveLoading" ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="租户名" prop="name">
        <el-input v-model="form.name" placeholder="请输入租户名称"></el-input>
      </el-form-item>
      <el-form-item label="租户简称" prop="simpleName">
        <el-input v-model="form.simpleName" placeholder="请输入租户简称"></el-input>
      </el-form-item>
      <el-form-item label="分库标识" prop="tenantKey">
        <el-input v-model="form.tenantKey" placeholder="请输入分库标识" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="分库地址" prop="dbUrl">
        <el-select
          v-model="form.dbUrl"
          placeholder="服务器列表"
          size="large"
          style="width: 240px"
          :disabled="disabled"
        >
          <el-option v-for="item in serverList" :key="item.id" :label="item.name" :value="item.tag"/>
        </el-select>
      </el-form-item>
      <el-form-item label="截至时间" prop="serveTime">
        <el-date-picker
          v-model="form.serveTime"
          type="date"
          placeholder="选择服务截至日期"
          size="large"
          date-format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"

        />
      </el-form-item>
      <el-form-item label="用户状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="1">开启</el-radio>
          <el-radio :value="2">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save(formRef)">保存</el-button>
        <el-button type="primary" @click="$emit('close')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>
